<%@page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="html" tagdir="/WEB-INF/tags" %>


<!DOCTYPE html>
<html>
<head>
    <title>logo上传</title>

    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="${baseUrl}images/favicon.ico" rel="SHORTCUT ICON">


    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <script src="${baseUrl}lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>


    <link rel="stylesheet" href="${baseUrl}lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${baseUrl}css/style.css" media="all">
    <link rel="stylesheet" href="${baseUrl}css/public.css" media="all">

    <link rel="stylesheet" href="${baseUrl}lib/cropper/cropper.css" type="text/css" />
    <script type="text/javascript" src="${baseUrl}lib/cropper/cropper.js"></script>

    <script type="text/javascript" src="${baseUrl}js/main.js"></script>
    <script type="text/javascript" src="${baseUrl}/js/imgCrop.js"></script>
    <style type="text/css">
        .selectPhoto{
            margin-top: 20px;
            width :400px;
            height: 400px;
            background-color: #eeeeee;
            border:1px #aaaaaa solid;
            text-align: center;
        }
    </style>
    <script>
        jQuery(function () {
            get("${baseUrl}account/getUserCompany.action",function (resp) {
                $("#currentLogo").attr("src","${baseUrl}img/company/" + resp.data.logo);
                $("#id").val(resp.data.id);
            });
        });
    </script>
</head>
<body style="background-color:#ffffff;">
<input type="hidden" id="id" value="${companyVo.company.id}" />
<input type="hidden" id="baseUrl" value="${baseUrl}">
<input  id="inputImage"  type="file" accept="image/*" style="display: none;"/>
<form id="cutUploadForm" enctype="multipart/form-data" style="display: none;"><input type="file"></form>

<div class="layui-row">
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
        <div style="margin-top: 20px;width: 180px;height: 180px; padding: 20px 0 0 20px; background-color: #eeeeee; border: 1px #aaaaaa solid">
            <img id="currentLogo" src="${baseUrl}img/company/${companyVo.company.logo}" style="width: 160px;height: 160px;">
        </div>
        <div style="padding-top: 20px;color: #444444">当前logo</div>
    </div>


    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
        <div style="margin-top: 20px;width: 180px;height: 180px; padding: 20px 0 0 20px; background-color: #eeeeee; border: 1px #aaaaaa solid">
            <div  id="showImg" class="previewCut" style="width: 160px;height: 160px;overflow: hidden; border: 1px #aaaaaa dashed;">
            </div>
        </div>
        <div style="padding-top: 20px;color: #444444">logo预览</div>
        <div style="font-size: 12px; padding-top: 10px; color: #aaaaaa;width: 160px;">生成头像大小160px*160px，上传图片后，左侧选取图片合适大小，点击下面的提交按钮。</div>

        <p style="margin-top: 3px;color: red;" id="photoCutErr"></p>

        <div>
            <button id="selectCut" type="button" class="layui-btn layui-btn-sm layui-btn-danger">返回</button>
            <button id="uploadCut" type="button" class="layui-btn layui-btn-sm layui-btn-normal">上传</button>
        </div>
    </div>

    <div class="layui-col-xs12 layui-col-sm12 layui-col-md5">
        <div id="selectPhoto" class="selectPhoto" onclick="document.getElementById('inputImage').click()" >
            <div style="margin-top: 150px;">
                <img src="${baseUrl}images/upload.png">
                <p>请上传您的头像</p>
            </div>
        </div>

        <div id="cutPhoto" class="selectPhoto" style="display: none;width :400px;height: 400px">
            <img id="cutImage" alt="Picture" style="width: 220px;height: 220px;">
        </div>

    </div>
</div>
</body>
</html>